{% extends 'base.html' %}

{% block title %}Create Account — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
    nav, footer { display: none !important; }
    body { background: #fff; margin: 0; }

    .signup-wrapper {
        min-height: 100vh;
        display: grid;
        grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr);
    }

    .auth-brand {
        position: relative;
        color: #fff;
        background:
          radial-gradient(circle at 85% 12%, rgba(56, 189, 248, .22), transparent 42%),
          radial-gradient(circle at 10% 90%, rgba(251, 191, 36, .14), transparent 38%),
          linear-gradient(160deg, var(--brand-secondary, #0f2557) 0%, var(--brand-primary, #1e40af) 55%, #1d4ed8 100%);
        padding: 3rem 2.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .auth-brand::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
        pointer-events: none;
    }
    .auth-brand-inner { position: relative; z-index: 1; max-width: 34rem; }
    .auth-brand-kicker {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        opacity: .75;
        margin-bottom: .85rem;
    }
    .auth-brand h1 {
        font-size: clamp(1.65rem, 2.4vw, 2.15rem);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.15;
        margin: 0 0 1rem;
    }
    .auth-brand-lead {
        font-size: .95rem;
        line-height: 1.65;
        opacity: .88;
        margin-bottom: 1.75rem;
    }
    .auth-feature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 1rem;
        overflow: hidden;
        background: rgba(255,255,255,.04);
    }
    .auth-feature {
        padding: 1rem 1.1rem;
        border-right: 1px solid rgba(255,255,255,.12);
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .auth-feature:nth-child(2n) { border-right: none; }
    .auth-feature:nth-last-child(-n+2) { border-bottom: none; }
    .auth-feature i {
        font-size: 1.2rem;
        display: block;
        margin-bottom: .4rem;
        opacity: .95;
    }
    .auth-feature strong {
        display: block;
        font-size: .75rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        margin-bottom: .2rem;
    }
    .auth-feature span {
        font-size: .78rem;
        opacity: .78;
        line-height: 1.4;
    }
    .auth-brand-foot {
        margin-top: 1.75rem;
        font-size: .75rem;
        opacity: .55;
    }
    .auth-brand-foot a { color: #fff; text-decoration: none; font-weight: 600; }

    .form-panel {
        overflow-y: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 2.5rem 2rem;
        background: #fff;
    }
    .form-box {
        width: 100%;
        max-width: 560px;
        padding: .5rem 0 2rem;
    }
    .form-box .form-control {
        padding: .6rem 1rem;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        font-size: .92rem;
        transition: border-color .2s, box-shadow .2s;
    }
    .form-box .form-control:focus {
        border-color: var(--brand-primary, #2563eb);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    .form-box .form-control.is-invalid { border-color: #ef4444; }
    .form-box .form-control.is-valid   { border-color: #22c55e; }
    .input-group .form-control { border-radius: 10px 0 0 10px !important; border-right: none; }
    .input-group .btn-eye {
        border: 1.5px solid #e2e8f0; border-left: none;
        border-radius: 0 10px 10px 0 !important;
        background: #fff; color: #64748b;
        padding: .6rem .9rem; transition: color .2s;
    }
    .input-group .btn-eye:hover { color: var(--brand-primary, #2563eb); }
    .input-group .form-control:focus + .btn-eye { border-color: var(--brand-primary, #2563eb); }
    .btn-register {
        background: linear-gradient(135deg, var(--brand-primary, #1d4ed8), #2563eb);
        border: none; border-radius: 10px;
        padding: .75rem; font-size: 1rem;
        font-weight: 600; letter-spacing: .3px;
        transition: opacity .2s, transform .1s;
    }
    .btn-register:hover { opacity: .92; transform: translateY(-1px); }
    .field-label {
        font-size: .8rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: .35rem;
        display: block;
    }
    .section-title {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #94a3b8;
        margin: 1.25rem 0 .75rem;
    }

    @media (max-width: 900px) {
        .signup-wrapper { grid-template-columns: 1fr; }
        .auth-brand { min-height: auto; padding: 2rem 1.5rem; }
    }
    @media (max-width: 520px) {
        .auth-feature-grid { grid-template-columns: 1fr; }
        .auth-feature { border-right: none !important; }
        .auth-feature:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
        .auth-feature:last-child { border-bottom: none; }
    }
</style>
{% endblock %}

{% block content %}
<div class="signup-wrapper">

    <aside class="auth-brand">
        <div class="auth-brand-inner">
            <div class="auth-brand-kicker">{{ site_settings.institute_name }}</div>
            <h1>Build skills. Prove mastery. Move forward.</h1>
            <p class="auth-brand-lead">
                Create one free account to enroll in courses, apply for skill certifications,
                and earn credentials employers can verify.
            </p>

            <div class="auth-feature-grid">
                <div class="auth-feature">
                    <i class="bi bi-collection-play"></i>
                    <strong>Courses</strong>
                    <span>Guided lessons from industry practitioners</span>
                </div>
                <div class="auth-feature">
                    <i class="bi bi-award"></i>
                    <strong>Certifications</strong>
                    <span>Proctored exams with verifiable certificates</span>
                </div>
                <div class="auth-feature">
                    <i class="bi bi-graph-up-arrow"></i>
                    <strong>Progress</strong>
                    <span>Track enrollments, attempts, and results</span>
                </div>
                <div class="auth-feature">
                    <i class="bi bi-briefcase"></i>
                    <strong>Career-ready</strong>
                    <span>Skills aligned with real workplace roles</span>
                </div>
                <div class="auth-feature">
                    <i class="bi bi-calendar2-check"></i>
                    <strong>Flexible exams</strong>
                    <span>Center booking or remote proctoring</span>
                </div>
                <div class="auth-feature">
                    <i class="bi bi-shield-lock"></i>
                    <strong>Secure access</strong>
                    <span>Protected account with verified identity</span>
                </div>
            </div>

            <p class="auth-brand-foot mb-0">
                &copy; {% now "Y" %} {{ site_settings.institute_name }}.
                Design &amp; Developed by <a href="https://nextdot.pk" target="_blank" rel="noopener noreferrer">NEXT DOT CONSULTANT</a>
            </p>
        </div>
    </aside>

    <!-- ── Right form panel ─────────────────────────────────── -->
    <div class="form-panel">
        <div class="form-box">

            <div class="mb-4 text-center">
                <a href="{% url 'home' %}" class="text-decoration-none d-inline-block">
                {% if site_settings.logo_dark_url %}
                <img src="{{ site_settings.logo_dark_url }}" alt="{{ site_settings.institute_name }}"
                     style="max-height:64px;max-width:240px;object-fit:contain;margin-bottom:1rem;">
                {% else %}
                <div class="fw-bold mb-2" style="font-size:1.25rem;color:#0f172a;">{{ site_settings.institute_name }}</div>
                {% endif %}
                </a>
                <h2 class="fw-bold mb-1" style="color:#0f172a;">Create your account</h2>
                <p class="text-muted" style="font-size:.88rem;">Join courses and certifications with one free student account.</p>
            </div>

            {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3 py-2 small" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
            {% endif %}

            <form method="post" novalidate id="signupForm">
                {% csrf_token %}

                <!-- Account details -->
                <p class="section-title"><i class="bi bi-person-badge me-1"></i>Account Details</p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="field-label" for="{{ form.username.id_for_label }}">
                            Username <span class="text-danger">*</span>
                        </label>
                        {{ form.username }}
                        {% for e in form.username.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                    <div class="col-md-6">
                        <label class="field-label" for="{{ form.full_name.id_for_label }}">
                            Full Name <span class="text-danger">*</span>
                        </label>
                        {{ form.full_name }}
                        {% for e in form.full_name.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                    <div class="col-md-6">
                        <label class="field-label" for="{{ form.email.id_for_label }}">
                            Email <span class="text-danger">*</span>
                        </label>
                        {{ form.email }}
                        {% for e in form.email.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                    <div class="col-md-6">
                        <label class="field-label" for="{{ form.phone_number.id_for_label }}">
                            Phone Number
                        </label>
                        {{ form.phone_number }}
                        {% for e in form.phone_number.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                    <div class="col-12">
                        <label class="field-label" for="id_cnic">
                            CNIC <span class="text-danger">*</span>
                        </label>
                        {{ form.cnic }}
                        <div id="cnic_counter" class="form-text text-end text-muted small mt-1">0 / 13 digits</div>
                        {% for e in form.cnic.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                </div>

                <!-- Password -->
                <p class="section-title mt-4"><i class="bi bi-lock me-1"></i>Password</p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="field-label" for="id_password1_input">
                            Password <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <input type="password" id="id_password1_input" name="password1"
                                   class="form-control{% if form.password1.errors %} is-invalid{% endif %}"
                                   placeholder="Create password" autocomplete="new-password" required>
                            <button class="btn btn-eye" type="button" id="toggleP1" tabindex="-1">
                                <i class="bi bi-eye" id="eyeP1"></i>
                            </button>
                        </div>
                        <div class="form-text small text-muted mt-1">Min 8 chars, not entirely numeric.</div>
                        {% for e in form.password1.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                    <div class="col-md-6">
                        <label class="field-label" for="id_password2_input">
                            Confirm Password <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <input type="password" id="id_password2_input" name="password2"
                                   class="form-control{% if form.password2.errors %} is-invalid{% endif %}"
                                   placeholder="Repeat password" autocomplete="new-password" required>
                            <button class="btn btn-eye" type="button" id="toggleP2" tabindex="-1">
                                <i class="bi bi-eye" id="eyeP2"></i>
                            </button>
                        </div>
                        <div id="matchFeedback" class="form-text small mt-1"></div>
                        {% for e in form.password2.errors %}<div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ e }}</div>{% endfor %}
                    </div>
                </div>

                <button type="submit" class="btn btn-register btn-primary w-100 text-white mt-4">
                    <i class="bi bi-person-check me-2"></i>Create Account
                </button>
            </form>

            <p class="text-center text-muted small mt-3 mb-1">
                Already have an account?
                <a href="{% url 'accounts:login' %}" class="text-primary text-decoration-none fw-semibold">Sign In</a>
            </p>
            <p class="text-center text-muted small mb-0">
                <a href="{% url 'home' %}" class="text-secondary text-decoration-none">
                    <i class="bi bi-house me-1"></i>Return to Landing Page
                </a>
            </p>

        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    // ── Mark server-side error fields ─────────────────────────
    document.querySelectorAll('.invalid-feedback, .text-danger.small').forEach(function (el) {
        var wrapper = el.closest('.col-12, .col-md-6');
        if (wrapper) {
            var input = wrapper.querySelector('.form-control');
            if (input) input.classList.add('is-invalid');
        }
    });

    // ── Show/hide password toggles ────────────────────────────
    function eyeToggle(btnId, inpId, icoId) {
        var btn = document.getElementById(btnId);
        var inp = document.getElementById(inpId);
        var ico = document.getElementById(icoId);
        if (!btn) return;
        btn.addEventListener('click', function () {
            inp.type = inp.type === 'password' ? 'text' : 'password';
            ico.className = inp.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
        });
    }
    eyeToggle('toggleP1', 'id_password1_input', 'eyeP1');
    eyeToggle('toggleP2', 'id_password2_input', 'eyeP2');

    // ── Live password match indicator ─────────────────────────
    var p1 = document.getElementById('id_password1_input');
    var p2 = document.getElementById('id_password2_input');
    var fb = document.getElementById('matchFeedback');
    function checkMatch() {
        if (!p2.value) { fb.innerHTML = ''; p2.classList.remove('is-valid','is-invalid'); return; }
        if (p1.value === p2.value) {
            fb.innerHTML = '<span class="text-success"><i class="bi bi-check-circle me-1"></i>Passwords match</span>';
            p2.classList.add('is-valid'); p2.classList.remove('is-invalid');
        } else {
            fb.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Passwords do not match</span>';
            p2.classList.add('is-invalid'); p2.classList.remove('is-valid');
        }
    }
    if (p1 && p2) { p1.addEventListener('input', checkMatch); p2.addEventListener('input', checkMatch); }

    // ── CNIC auto-format mask (XXXXX-XXXXXXX-X) ──────────────
    var cnicInput = document.getElementById('id_cnic');
    var counter   = document.getElementById('cnic_counter');
    if (!cnicInput || !counter) return;

    function formatCnic(val) {
        var d = val.replace(/\D/g, '').slice(0, 13);
        if (d.length <= 5)  return d;
        if (d.length <= 12) return d.slice(0,5) + '-' + d.slice(5);
        return d.slice(0,5) + '-' + d.slice(5,12) + '-' + d.slice(12);
    }

    function updateCnic() {
        var digits = cnicInput.value.replace(/\D/g, '');
        if (digits.length === 0) {
            cnicInput.classList.remove('is-valid','is-invalid');
            counter.className = 'form-text text-end text-muted small mt-1';
            counter.textContent = '0 / 13 digits';
        } else if (digits.length === 13) {
            cnicInput.classList.add('is-valid'); cnicInput.classList.remove('is-invalid');
            counter.className = 'form-text text-end text-success small fw-medium mt-1';
            counter.textContent = '✓ Valid format';
        } else {
            cnicInput.classList.add('is-invalid'); cnicInput.classList.remove('is-valid');
            counter.className = 'form-text text-end text-danger small mt-1';
            counter.textContent = digits.length + ' / 13 digits';
        }
    }

    cnicInput.addEventListener('input', function () {
        var sel = this.selectionStart;
        var before = this.value.slice(0, sel).replace(/\D/g,'').length;
        this.value = formatCnic(this.value);
        var pos = 0, seen = 0;
        for (var i = 0; i < this.value.length; i++) {
            if (/\d/.test(this.value[i])) seen++;
            if (seen === before) { pos = i + 1; break; }
        }
        this.setSelectionRange(pos, pos);
        updateCnic();
    });
    cnicInput.addEventListener('keydown', function (e) {
        var ok = ['Backspace','Delete','Tab','Enter','ArrowLeft','ArrowRight','Home','End'];
        if (ok.indexOf(e.key) !== -1 || e.ctrlKey || e.metaKey) return;
        if (!/^\d$/.test(e.key)) e.preventDefault();
    });
    cnicInput.addEventListener('paste', function (e) {
        e.preventDefault();
        this.value = formatCnic(this.value + (e.clipboardData||window.clipboardData).getData('text'));
        updateCnic();
    });
    if (cnicInput.value) { cnicInput.value = formatCnic(cnicInput.value); updateCnic(); }
})();
</script>
{% endblock %}